
<script>
import * as config from '../static/config/config.js'

export default {
    name: 'view_data',

    data() {
      return {
        tableData: [],
        showData:[],
        searchData:[],
        searchResultboolean: false,
        val:'',
        currentPage:1,
        totalCount:100,
        PageSize:10,
        state:'',
        state1:'',
      }
    },
    methods: {

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        console.log("这是变更每页数量")
        this.PageSize=val
        // 注意：在改变每页显示的条数时，要将页码显示到第一页.val 是每页数量
        this.currentPage=1
        if(this.searchResultboolean==false){
          this.totalCount=this.tableData.length
          this.showData = this.tableData.slice(this.PageSize*(this.currentPage-1),this.PageSize*(this.currentPage))
        }else{
          this.totalCount=this.searchData.length
          this.showData = this.searchData.slice(this.PageSize*(this.currentPage-1),this.PageSize*(this.currentPage))
        }
      },
      handleCurrentChange(val) {
        console.log("变更当前页");
        console.log(`第 ${val} 页`);
        this.currentPage=val
        if(this.searchResultboolean==false){
          this.totalCount=this.tableData.length
          this.showData = this.tableData.slice(this.PageSize*(this.currentPage-1),this.PageSize*(this.currentPage))
        }else{
          this.totalCount=this.searchData.length
          this.showData = this.searchData.slice(this.PageSize*(this.currentPage-1),this.PageSize*(this.currentPage))
        }
      },
      querySearchAsync(queryString, cb) { //这里cb，返回数据用，参见element-ui 输入框官网
        var tData = this.tableData;//直接用值，这里加载后直接查询所有数据，先不在后端改下面的results
        var results = queryString ? tData.filter(this.createStateFilter(queryString)) : tData;
        //filter 用这个function 返回所有要创建的元素，没有的话就返回res，接收queryString
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 300 * Math.random());
      },
      createStateFilter(queryString) {//执行filter，用的indexOf。。。用的value，用的state(绑定的state），querystring是输入值
        return (state) => {
          return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
        this.showData = this.tableData.filter(index => index.name == item);
      },
      rMatch(element){
        if(-1 != element.name.indexOf(this.state1))
          return element
      },
      queryButton(){
        this.searchResultboolean=true;
        this.searchData = this.tableData.filter(this.rMatch);
        this.handleCurrentChange(1);
      },
      clearButton(){
        this.state1 = "";
        this.searchResultboolean=false;
        this.handleCurrentChange(1);
      }
    },
    mounted() {
    },
    created(){//注意回调  "http://192.168.10.150:5000"   config.BaseUrl
      this.$axios.get( config.BaseUrl  +'/v1/collection1/select/')
      .then(response => {console.log(response);this.tableData=response.data;
            this.showData = this.tableData.slice(0,this.PageSize);this.totalCount=response.data.length}).catch(err => {console.log(err);console.log("检查是否无法访问后端")});
      
    },

};

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
<div id="app">
搜索：
<el-input v-model="state1" placeholder="请输入内容" style="width: 30%"  clearable  @change="queryButton"
></el-input>
<el-button type="primary"  @click="queryButton">搜索姓名</el-button>
<el-button type="warning"  @click="clearButton">清空</el-button>
  <el-table        :data="showData"      stripe
    style="width: 100%">  <!-- 这里是search,可以本地搜索的？设置了data -->
    <el-table-column
      label="ID"
      prop="_id.$oid">
    </el-table-column>
    <el-table-column
      label="Name"
      prop="name">
    </el-table-column>
    <el-table-column
      label="URL"
      prop="url">
    </el-table-column>

  </el-table>

<div class="block">
  <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10,100, 200, 500, 1000]"
    :page-size="PageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total=totalCount>
  </el-pagination>
</div>

</div>

</template>